<%--
  审核记录列表页面
  功能：展示所有活动审核记录，提供查看详情、编辑和删除功能
  版本：1.0
  日期：2023-07-20
--%>

<%-- JSP指令 --%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%-- 引入JSTL核心标签库 --%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <%-- 引入JSTL格式化标签库 --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false"%> <%-- 设置页面编码并启用EL表达式 --%>

<!DOCTYPE html>
<html>
<head>
    <title>审核记录列表</title>
    <%-- 引入外部CSS --%>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <%-- Bootstrap CSS --%>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet"> <%-- Bootstrap图标 --%>

    <%-- 页面自定义样式 --%>
    <style>
        /* 基础样式 */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f8f9fa;
        }

        /* 容器样式 */
        .container {
            padding: 20px;
        }

        /* 表格容器样式 */
        .table-container {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-top: 20px;
            overflow-x: auto; /* 表格溢出时显示滚动条 */
        }

        /* 表格基础样式 */
        .table {
            width: 100%;
            table-layout: fixed; /* 固定表格布局 */
            margin-bottom: 0;
        }

        /* 表头和单元格样式 */
        .table th, .table td {
            padding: 12px 8px;
            vertical-align: middle;
            text-align: center;
            word-wrap: break-word; /* 长文本自动换行 */
        }

        /* 表头特殊样式 */
        .table th {
            background-color: #f8f9fa;
            font-weight: 600;
            white-space: nowrap; /* 表头文本不换行 */
        }

        /* 列宽分配 */
        .table th:nth-child(1), .table td:nth-child(1) { width: 8%; }  /* ID列 */
        .table th:nth-child(2), .table td:nth-child(2) { width: 8%; }  /* 活动ID列 */
        .table th:nth-child(3), .table td:nth-child(3) { width: 12%; } /* 审核状态列 */
        .table th:nth-child(4), .table td:nth-child(4) { width: 20%; } /* 审核时间列 */
        .table th:nth-child(5), .table td:nth-child(5) { width: 20%; } /* 操作列 */

        /* 操作按钮容器样式 */
        .action-btns {
            display: flex;
            justify-content: center;
            gap: 6px; /* 按钮间距 */
        }

        /* 操作按钮样式 */
        .action-btn {
            padding: 5px 10px;
            font-size: 0.85rem;
        }

        /* 徽章样式 */
        .badge {
            padding: 6px 10px;
            font-size: 0.85rem;
            font-weight: 500;
        }

        /* 响应式设计 - 小屏幕适配 */
        @media (max-width: 1200px) {
            .table th, .table td {
                padding: 8px 5px;
                font-size: 0.9rem;
            }

            .action-btns {
                flex-direction: column; /* 小屏幕下按钮垂直排列 */
                gap: 4px;
            }

            .action-btn {
                width: 100%; /* 小屏幕下按钮占满宽度 */
            }
        }
    </style>
</head>
<body class="bg-light">
<div class="container">
    <%-- 引入顶部导航栏 --%>
    <%@include file="top.jsp"%>

    <%-- 内容区域 --%>
    <div class="d-flex justify-content-between align-items-center mb-4">
        <%-- 可在此处添加标题或其他内容 --%>
    </div>

    <%-- 表格容器 --%>
    <div class="table-container">
        <%-- 表格主体 --%>
        <table class="table table-hover">
            <thead>
            <tr>
                <th>ID</th>
                <th>活动ID</th>
                <th>审核状态</th>
                <th>审核时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <%-- 使用JSTL遍历审核记录列表 --%>
            <c:forEach items="${reviews}" var="review">
                <tr>
                    <td>${review.reviewId}</td> <%-- 审核记录ID --%>
                    <td>${review.activityId}</td> <%-- 活动ID --%>
                    <td>
                            <%-- 根据审核状态显示不同颜色的徽章 --%>
                        <c:choose>
                            <c:when test="${review.reviewStatus == 'approved'}">
                                <span class="badge bg-success">通过</span>
                            </c:when>
                            <c:otherwise>
                                <span class="badge bg-danger">拒绝</span>
                            </c:otherwise>
                        </c:choose>
                    </td>
                    <td><%-- 格式化显示审核时间 --%>
                        <fmt:formatDate value="${review.reviewTime}" pattern="yyyy-MM-dd HH:mm"/>
                    </td>
                    <td>
                            <%-- 操作按钮组 --%>
                        <div class="action-btns">
                                <%-- 详情按钮 --%>
                            <a href="activityreview/detail/${review.activityId}"
                               class="btn btn-sm btn-info action-btn"
                               title="查看活动详情">
                                <i class="bi bi-info-circle"></i> 详情
                            </a>
                                <%-- 编辑按钮 --%>
                            <a href="activityreview/edit/${review.reviewId}"
                               class="btn btn-sm btn-warning action-btn">
                                <i class="bi bi-pencil"></i> 编辑
                            </a>
                                <%-- 删除按钮(带确认对话框) --%>
                            <a href="activityreview/delete/${review.reviewId}"
                               class="btn btn-sm btn-danger action-btn"
                               onclick="return confirm('确定删除此审核记录吗？')">
                                <i class="bi bi-trash"></i> 删除
                            </a>
                        </div>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
</div>

<%-- 引入Bootstrap JS --%>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>